<template>
	<div class="p-3 h-full flex dt-page w-full flex-col">
		<ECForm @register="registerForm"></ECForm>
		<DtTable @register="registerTable"></DtTable>
		<DtCurdModal></DtCurdModal>

		<CtrlColumns @register="registerColumn"></CtrlColumns>
	</div>
</template>

<script lang="ts" setup>
	import { dict, Ahttp } from '@zm-pkg/core'
	import { useCurd, useForm, useModalOut, useSource, useTable } from '@zm-pkg/ui'
	import { default as CtrlColumns } from './components/index.vue'

	const [registerColumn, { openModal }] = useModalOut()

	const { table, form, curd, onSearch } = useSource({
		baseUrl: '/api-common/',
		exportName: 'BASE.COLUMN_CTRL.VIEW_MANAGE',
		authPrefix: 'uc:user',
		api: {
			queryPage: 'queryPage',
			deletes: 'deleteByIds',
			add: 'add',
			update: 'updateById',
			queryById: 'queryById'
		}
	})

	const [registerForm] = useForm({
		...form,
		schemas: [
			{ component: 'Input', label: '测试', name: 'test' },
			{ component: 'Input', label: '测试', name: 'test1' },
			{ component: 'Input', label: '测试', name: 'test2' },
			{ component: 'Input', label: '测试', name: 'test3' }
		]
	})

	const { DtCurdModal } = useCurd({
		...curd,
		title: '测试增删改查',
		width: '40%',
		formProps: {
			span: 24
		},
		schemas: [
			{ component: 'Input', label: '数据表编码', name: 'tableCode', required: true },
			{ component: 'Input', label: '表名称', name: 'tableName', required: true },
			{ component: 'Select', label: '是否启用', name: 'isEnable', props: { options: dict('IS_ENABLE') } },
			{ component: 'Upload', label: '测试上传', name: 'uploadFile', props: {
				listType: 'picture-card'
			} },
			{ component: 'InputTextArea', label: '视图描述', name: 'tableDesc',
				colProps: {
					span: 24
				},
                props: {
                    autoSize: { minRows: 2, maxRows: 4 },
                }
			},
		]
	})


	const [registerTable] = useTable({
		...table,
		columnCode: 'VIEW_COLUMN',
		operations: {
			expand: true,
			expandNum: 2,
			btns: [
				{ label: '配置列', icon: 'ic:baseline-import-contacts', auth: 'edit', onClick: (row) => {
					openModal(row, onSearch)
				} },
				{ label: '编辑', icon: 'mdi:text-box-edit-outline',onClick: table.onOpenUpdateDialog, auth: 'add' },
				{ label: '删除', icon: 'mdi:delete-outline', onClick: table.onDelete }
			]
		}
	})

	// onMounted(() => {
	// 	Ahttp
	// 		.post('https://service-hvo9xepw-1315611084.gz.apigw.tencentcs.com/release/api-auth/login', {id: '167273692792028984'})
	// 		.then(rsp => {
	// 			console.log(rsp)
	// 		})
	// })
</script>

<style lang="less" scoped>
	.dt-page{
		background: #fff;
		width: calc(100% - 24px);
		height: calc(100% - 24px);
		margin: 12px;
	}
	:deep(.dt-table) {
		padding: 0px 12px 6px 12px;
		border-radius: 2px;
		background: #fff;
		border-radius: 5px;
		flex: 1;
	}
</style>
